<template>
  <div class="page-common-layout">
    <div class="page-common-content">
      <tool-bar
          @search="$refs.table.refresh(true)"
          @reset="
          () => {
            (this.queryParam = {}), $refs.table.refresh(true);
          }
        "
      >
        <template slot="toolForm">
          <a-form-item label="流程标题">
            <a-input
                v-model="queryParam.formName"
                placeholder="流程标题"
                style="width: 100%"
            />
          </a-form-item>
          <a-form-item label="所属流程">
            <a-input
                v-model="queryParam.modelName"
                placeholder="所属流程"
                style="width: 100%"
            />
          </a-form-item>
        </template>
      </tool-bar>
      <DataGrid
          ref="table"
          :columns="columns"
          :url="url"
          rowKey="taskId"
          showPagination="auto"
          :queryParam="queryParam"
          :showRowSelect="false"
      >
        		<span slot="renderFlowStatus" slot-scope="{ text, record, index }">
					<a-tag :color="'green'">
						等待审核
					</a-tag>
        </span>
        <span slot="renderAction" slot-scope="{ text, record }">
          <template>
            <a @click="flowChart(record)">详情</a>
						<span class="action-margin"></span>
            <a @click="flowCancel(record)" class="action-delete">作废</a>
						<a-dropdown>
							<a class="ant-dropdown-link">
								{{$ct("more","更多")}}
								<a-icon type="down" />
							</a>
							<a-menu slot="overlay">
								<a-menu-item>
									<a @click="flowProcessedBy(record)">指定处理人</a>
								</a-menu-item>
							</a-menu>
						</a-dropdown>
          </template>
        </span>
      </DataGrid>
      <flow-chat ref="flowChatForm"/>
      <taskForm
          ref="taskModal"
          :visible="taskVisible"
          @cancel="taskHandleCancel()"
          @ok="taskHandleOk"
      />
      <flowCancel
          :flowTitle="title"
          ref="flowCancelModal"
          :model="mdl"
          :visible="flowCancelVisible"
          @cancel="flowCancelHandleCancel()"
          @ok="flowCancelHandleOk"
      ></flowCancel>
      <flowProcessedBy
          :flowProcessedBytitle="flowProcessedBytitle"
          ref="flowProcessedByModal"
          :visible="flowProcessedByVisible"
          :model="flowProcessedBytitlemdl"
          @cancel="flowProcessedByHandleCancel()"
          @ok="flowProcessedByHandleOk"
      ></flowProcessedBy>
    </div>
  </div>
</template>

<script>
import {dataGridMixin} from "@/mixins/dataGridMixin";
import {DataGrid} from "@/components";

import flowChat from "../myMission/flowChat.vue";
import taskForm from "./taskForm.vue";

import flowCancel from "./flowCancel.vue";
import flowProcessedBy from "./flowProcessedBy.vue";

export default {
  name: "TableList",
  mixins: [dataGridMixin],
  components: {
    DataGrid,
    flowChat,
    taskForm,
    flowCancel,
    flowProcessedBy
  },
  data() {
    return {
      columns: [
        {
          title: "流程标题",
          dataIndex: "formName",
          width: 200,
          langCode: "workflowTitle"
        },
        {
          title: "所属流程",
          dataIndex: "modelName",
          width: 150,
          langCode: "workflowBelongingTo",
        },
        {
          title: "审核环节",
          dataIndex: "taskName",
          align: "center",
          langCode: "auditPhase",
        },
        {
          title: "发起人",
          dataIndex: "startUserId",
          langCode: "sponsor",
          align: "center",
        },
        {
          title: "发起时间",
          dataIndex: "startTime",
          langCode: "originatingTime",
        },
        {
          title: "流程状态",
          dataIndex: "flowStatus",
          langCode: "ProcessStatus",
          align: "center",
          scopedSlots: {
            customRender: "renderFlowStatus"
          },
        },
        {
          title: "操作",
          dataIndex: "action",
          width: 140,
          scopedSlots: {
            customRender: "renderAction",
          },
          align: "center",
        },
      ],
      taskVisible: false,
      visible: false,
      confirmLoading: false,
      mdl: null,
      flowProcessedBytitlemdl: null,
      queryParam: {},
      url: {
        getPageSet: "/workflow/apiFlowableTask/getTaskPageSet",
      },
      //点击流程
      flowCancelVisible: false,
      title: '',
      flowProcessedBytitle: '',
      flowProcessedByVisible: false
    };
  },
  methods: {
    // 点击详情按钮
    flowChart(record) {
      this.$post("/workflow/apiFlowableProcessInstance/clickStartProcess", {
        modelKey: record.modelKey,
        taskId: record.taskId,
        processInstanceId: record.processInstanceId,
        nodeId: record.nodeId,
        processDefinitionId: record.processDefinitionId,
      }).then((res) => {
        if(res.statusCode === 300){
          this.$message.warn(res.message, 1.5);
        }else{
          const jsonData = res;
          this.$refs.taskModal.loadData(record, jsonData);
          this.taskVisible = true;
        }
      });
    },
    taskHandleOk() {
      this.taskVisible = false;
    },
    taskHandleCancel() {
      this.taskVisible = false;
    },
    //流程作废按钮
    flowCancel(record){
      const form = this.$refs.flowCancelModal.form;
      form.resetFields()
      this.title="【"+record.formName+"】- 流程作废";
      this.mdl = { processInstanceId: record.processInstanceId };
      this.flowCancelVisible = true;
    },
    flowCancelHandleCancel(record){
      this.flowCancelVisible = false;
    },
    flowCancelHandleOk(record) {
      const form = this.$refs.flowCancelModal.form;
      form.validateFields((errors, values) => {
            if (!errors) {
              const that = this;
              that.$confirm({
                title: "警告",
                content: `流程作废后用户已填写的数据将被一并删除且无法恢复， 是否确定作废！`,
                okText: "确定",
                cancelText: "取消",
                closable: true,
                icon: () => that.$createElement('a-icon', {
                  props: {
                    key: 'warning',
                    type: 'exclamation-circle',
                    twoToneColor: '#faad14'
                  }
                }),
                onOk() {
                  return new Promise((resolve, reject) => {
                    that
                        .$post("/workflow/apiFlowableProcessInstance/deleteProcessInstance", {
                          processInstanceId: values.processInstanceId,
                          reason: values.reason
                        })
                        .then((res) => {
                          if (res.statusCode === 200) {
                            that.flowCancelVisible = false;
                            that.$message.success(res.message);
                            that.$refs.table.refresh();
                            resolve();
                          } else {
                            that.flowCancelVisible = true;
                            that.confirmLoading = false;
                            that.$message.error(res.message);
                            resolve();
                          }
                        });
                  })
                },
                onCancel() {
                },
              });
            }
      });

    },
    //下一步处理人
    flowProcessedBy(record){
      const form = this.$refs.flowProcessedByModal.form;
      form.resetFields();
      this.flowProcessedBytitle="【"+record.formName+"】- 指定处理人";
      this.flowProcessedBytitlemdl= record;
      this.flowProcessedByVisible = true;
    },
    flowProcessedByHandleCancel(){
      this.flowProcessedByVisible = false;
    },
    flowProcessedByHandleOk() {
      const form = this.$refs.flowProcessedByModal.form;
      form.validateFields((errors, values) => {
        if (!errors) {
          const that = this;
          that.$confirm({
            title: "警告",
            content: `指定处理人将影响流程设计设置的处理人， 是否确定指定处理人！`,
            okText: "确定",
            cancelText: "取消",
            closable: true,
            icon: () => that.$createElement('a-icon', {
              props: {
                key: 'warning',
                type: 'exclamation-circle',
                twoToneColor: '#faad14'
              }
            }),
            onOk() {
              return new Promise((resolve, reject) => {
                that
                    .$post("/workflow/apiFlowableTask/assignedTo", {
                      assignUser: values.assignUser,
                      processInstanceId: values.processInstanceId,
                      modelKey: values.modelKey
                    })
                    .then((res) => {
                      if (res.statusCode === 200) {
                        that.flowProcessedByVisible = false;
                        that.$message.success(res.message);
                        that.$refs.table.refresh();
                        resolve();
                      } else {
                        that.flowProcessedByVisible = true;
                        that.confirmLoading = false;
                        that.$message.error(res.message);
                        resolve();
                      }
                    });
              })
            },
            onCancel() {
            },
          });
        }
      });
    },
  },
};
</script>

<style lang="less"></style>
